<template>
	<view class="content-wrapper">
		<swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration" @change="change">
			<swiper-item class="swiper-item" v-for="(banner,index1) in data" :key="index1">
				<image class="image-area" style="width: 700upx;height: 340upx;" :src="resourceHostPic + banner"
					mode="aspectFill" @click="click(index1)" @error="imageError"></image>
			</swiper-item>
		</swiper>
		<view class="index-area" v-if="data.length > 1">
			<text class="text-number">{{(number) + '/' + data.length}}</text>
		</view>
	</view>
</template>

<script>
	/* import api from '../common/api.js';
	var resource = api.getResource; */
    export default {
        props: {
            data: {
                type: Array,
                default: function(e) {
                    return {}
                }
            },
			resourceHostPic: {
				type: String,
				default: function(e){
					return ''
				}
			}
        },
		data() {
			return {
				//resourceHostPic: '',
				indicatorDots: false,
				autoplay: false,
				interval: 2000,
				duration: 500,
				indicatorColor: '#73000000',
				indicatorActiveColor: '#f2f2f2',
				number: 1,
			}
        },
		created() {
			//this.resourceHostPic = resource;
		},
        methods: {
			change: function (e){
				//console.log('change data=' + JSON.stringify(e));
// 				uni.showToast({
// 					title: JSON.stringify(e),
// 					duration: 2000
// 				});
				this.number = e.mp.detail.current+1
				//console.log('change number=' + this.number);
			},
            click(e) {
				/* uni.showToast({
					title: '你点击了第' + (e + 1) + '头图',
					duration: 2000
				}); */
                //this.$emit('headImageClick');
            },
			imageError:function(e){
				console.log('headImage imageError');
			}
        }
    }
</script>

<style>
    view {
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
    }

	.content-wrapper{
		display: flex;
		position:relative;
	}
    .swiper {
		flex: 1;
        width: 700upx;
        padding: 0upx;
		margin: 0upx;
    }
	.swiper-item{
		width: 700upx;
		border-radius: 15upx;
		padding: 0upx;
		margin: 0upx;
	}
	.image-area{
	}
	.index-area{
		position:absolute;
		width: 60upx;
		height: 34upx;
		right:5px;
		bottom:10px;
		background-color: #333333;
		opacity: 0.4;
		border-radius: 17upx;
		justify-content: center;
		align-items: center;
	}
	.text-number{
		color: white;
		font-size: 24upx;
	}
     
</style>

